import React, { useState,useEffect } from 'react'
import { Row, Col, Select, Input,Radio,Tabs,message} from 'antd';
import style1 from './index.module.scss';
import { List } from '../../../../components/PreLoanReCheck/List';
import { Link } from 'react-router-dom';
import { useSelector } from 'react-redux';
import {auditAdd} from "../../../../http/daizhongApi"
import {
    PrinterOutlined,
    LeftOutlined,
    CheckCircleFilled,
    ClockCircleFilled
  } from '@ant-design/icons';
import './index.scss'
const { Option } = Select

const style3 = { margin: 0 }
const style4 = { padding: 0 }
const { TabPane } = Tabs;
export default function Zhongshen(props) {
    const [selectValue, setSelectValue] = useState('')
    const [fushenvalue,setFushenValue] = useState("")
    const [input1Value1, setInput1Value] = useState("")
    const [input1Value2, setInput2Value] = useState("")
    const [textValue, setTextValue] = useState('')
    const [loanState,setLoanState] = useState(0)

    // 获取选择框的值
    const getSelect = (e) => {
        console.log('选择框的值', e);
        setSelectValue(e)
        if(e==="审核通过"){
            setLoanState(3)
        }else if(e==="审核拒绝"){
            setLoanState(8)
        }else if(e==="审核驳回"){
            setLoanState(5)
        }
    }
    const getInputVal1 = (e) => {
        console.log('审批金额', e.target.value);
        setInput1Value(e.target.value)
    }
    const getInputVal2 = (e) => {
        console.log('利率', e.target.value);
        setInput2Value(e.target.value)
    }
    // 获取文本框的值
    const getText = (e) => {
        console.log('获取文本框的值', e.target.value);
        setTextValue(e.target.value)
    }
    //提交审核结果
    const Submit =()=>{
        auditAdd({
            approval_amount:data?data.approval_amount:0,
            compound_interest:data?data.compound_interest:0,
            loan_state:loanState,
            audit_result:selectValue,
            auditor_id: 1,
            feedback:textValue,
            loan_id:data?data.approveLoan?data.approveLoan.loan_id:"":"",
            state:"终审"
        })
        .then(res=>{
            console.log(res);
            message.success('提交成功')
        })
        .catch(err=>{
            message.error('提交失败')
            console.log(err);
        })
    }


    //获取store中数据
    const [data,setData] = useState({})
    const daiZhongList = useSelector(state => state.daiZhongList)
    useEffect(() => {
        console.log(props);
        const id = props.location.search.replace("?","");
        console.log(id);
        const fildata = daiZhongList.list.filter(item=>String(item.loan_id)===id)
        console.log(fildata);
        setData(...fildata) 
        setFushenValue(fildata[0].applied_amount)
        setInput1Value(fildata[0].approval_amount)
        setInput2Value(fildata[0].compound_interest)
    }, [])
    

    const callback = (key) => {
        console.log(key);
    }
    const loanInfoData1 = [
        {
            id: 1,
            title: '贷款性质',
            key: 'loanXingzhi'
        },
        {
            id: 2,
            title: '贷款产品',
            key: 'loanGoods'
        },
        {
            id: 3,
            title: '还款方式',
            key: 'huankuangType'
        },
        {
            id: 4,
            title: '申请金额',
            key: 'applyMoney'
        },
        {
            id: 5,
            title: '综合利率',
            key: 'zhongheLilv'
        }
    ]
    // 借款信息表头2
    const loanInfoData2 = [
        {
            id: 1,
            title: '贷款类型',
            key: 'loanTrust'
        },
        {
            id: 2,
            title: '贷款用途',
            key: 'loanUseing'
        },
        {
            id: 3,
            title: '借款期限',
            key: 'loanTime'
        },
        {
            id: 4,
            title: '审批金额',
            key: 'shenpiMoney'
        },
        {
            id: 5,
            title: '借款管理费',
            key: 'jiekuangMoney'
        }
    ]
    // 借款信息1
    const data1 = {
        loanXingzhi: data?data.loan_nature:"",
        loanGoods: '工薪贷',
        huankuangType: data?data.reimbursement_means:"",
        applyMoney: 5000 + '元',
        zhongheLilv: 0 + '%',
    }
    // 借款信息2
    const data2 = {
        loanTrust: '信用',
        loanUseing: data?data.loan_use:"",
        loanTime: '6个月',
        shenpiMoney: 0 + '元',
        jiekuangMoney: 0 + '%',
    }

    // 个人信息表头1
    const PersonInfo1 = [
        {
            id: 1,
            title: '本人姓名',
            key: 'personName'
        },
        {
            id: 2,
            title: '手机号码',
            key: 'numberPhone'
        },
        {
            id: 3,
            title: '身份证',
            key: 'idCard'
        },
        {
            id: 4,
            title: '婚姻状况',
            key: 'maritalStatus'
        }

    ]
    // 个人信息表头2
    const PersonInfo2 = [
        {
            id: 1,
            title: '性别',
            key: 'sex'
        },
        {
            id: 2,
            title: '年龄',
            key: 'age'
        },
        {
            id: 3,
            title: '学历',
            key: 'learn'
        },
        {
            id: 4,
            title: '邮箱',
            key: 'email'
        }
    ]

    // 个人信息1
    const personalData1 = {
        personName: data?data.customer?data.customer.name:"":"",
        numberPhone: data?data.customer?data.customer.phone:"":"",
        idCard: '434221232123344',
        maritalStatus: '未婚'
    }
    // 个人信息2
    const personalData2 = {
        sex: '男',
        age: 29,
        learn: '本科',
        email: 'ru3940rhfewio@jferip'
    }

    // 居住信息表头1
    const liveInfo1 = [
        {
            id: 1,
            title: '居住情况',
            key: 'liveStatus'
        },
        {
            id: 2,
            title: '详细地址',
            key: 'addressDetail'
        },
        {
            id: 3,
            title: '现居住时长',
            key: 'liveTime'
        }
    ]
    // 居住信息表头2
    const liveInfo2 = [
        {
            id: 1,
            title: '现居住地',
            key: 'nowLive'
        },
        {
            id: 2,
            title: '住宅电话',
            key: 'zhuzhaiPhoneNumber'
        }
    ]
    // 居住信息1
    const liveData1 = {
        liveStatus: '租房',
        addressDetail: '四川省成都市',
        liveTime: '5年以上'
    }
    const liveData2 = {
        nowLive: '四川省成都市',
        zhuzhaiPhoneNumber: '028-683294545'
    }

    // 联系人表头1
    const ContactPerson1 = [
        {
            id: 1,
            title: '直系亲属姓名',
            key: 'zhixiname'
        },
        {
            id: 2,
            title: '移动电话',
            key: 'yidongphone'
        }
    ]

    // 联系人表头2
    const ContactPerson2 = [
        {
            id: 1,
            title: '关系',
            key: 'guanxi'
        }
    ]
    // 联系人信息1 
    const ContactData1 = {
        zhixiname: "邓某某",
        yidongphone: '7920392636'
    }
    // 联系人信息2
    const ContactData2 = {
        guanxi: '父亲'
    }

    // 职业信息表头1 
    const perfessionInfo1 = [
        {
            id: 1,
            title: '参与工作时间',
            key: 'enterWorkTime'
        },
        {
            id: 2,
            title: '公司地址',
            key: 'companyAddress'
        },
        {
            id: 3,
            title: '公司性质',
            key: 'companyxingzhi'
        },
        {
            id: 4,
            title: '每月收入',
            key: 'Monthincome'
        },
        {
            id: 5,
            title: '单位电话',
            key: 'danweiphoneNumber'
        }
    ]
    // 职业信息表头2
    const perfessionInfo2 = [
        {
            id: 1,
            title: '公司名称',
            key: 'companyName'
        },
        {
            id: 2,
            title: '详细地址',
            key: 'xiangxiaddress'
        },
        {
            id: 3,
            title: '所在行业',
            key: 'suozaihangye'
        },
        {
            id: 4,
            title: '入职时间',
            key: 'ruzhiTime'
        }
    ]
    // 职业信息1
    const perfessionData1 = {
        enterWorkTime: '2021-11-23',
        companyAddress: '四川省成都市',
        companyxingzhi: '民营企业',
        Monthincome: '3455-5677',
        danweiphoneNumber: '7888776564'
    }
    // 职业信息2
    const perfessionData2 = {
        companyName: '中石化',
        xiangxiaddress: '四川省成都市',
        suozaihangye: '互联网',
        ruzhiTime: '2021-2-1'
    }


    // 人脸识别表头
    const FaceInfo = [
        {
            id: 1,
            title: '认证状态',
            key: 'ceritification'
        }
    ]
    // 人脸识别信息
    const FaceData = {
        ceritification: '认证通过'
    }

    // 银行信息表头1
    const bankInfo1 = [
        {
            id: 1,
            title: '开户行',
            key: 'OpenBank'
        },
        {
            id: 2,
            title: '开户地',
            key: 'OpenPlace'
        },
        {
            id: 3,
            title: '银行账号',
            key: 'bankAccount'
        }
    ]
    // 银行信息表头2
    const bankInfo2 = [
        {
            id: 1,
            title: "户名",
            key: 'bankName'
        },
        {
            id: 2,
            title: '支行名称',
            key: 'banktitile'
        }

    ]
    // 银行信息1
    const bankData1 = {
        OpenBank: '中国银行',
        OpenPlace: '四川省成都市',
        bankAccount: '74390483204832432'
    }
    // 银行信息2
    const bankData2 = {
        bankName: '张小娴',
        banktitile: '十四点三'
    }
    const arr = [{
        url:'#gerenxinxi',
        title:'个人信息'
    },{
        url:'#juzhuxinxi',
        title:'居住信息'
    },{
        url:'#lianxiren',
        title:'联系人信息'
    },{
        url:'#shenfenrenzhen',
        title:'身份认证信息'
    },{
        url:'#yinhang',
        title:'银行资料'
    },{
        url:'#bucongzhengming',
        title:'补充证明材料'
    },{
        url:'#shenhexinxi',
        title:'审核信息'
    },]
    const lis = arr.map(item=>{
        return (
            <a href={item.url}>
                <li className={style1.li}>{item.title} </li>
            </a>
        )
    })
    const checked = (e)=>{
        console.log(e.target.innerText);

    }
    return (

        <div className={style1.box}>
            <div className={style1.nav}>
                <span className={style1.title2}>贷款审批</span>
                <div className={style1.right}>
                    <div>
                        <span className={style1.top}>初审 <CheckCircleFilled /> </span>
                        <span className={style1.top}>复审 <CheckCircleFilled /> </span>
                        <span className={style1.top}>终审 <CheckCircleFilled /> </span>
                        <span className={style1.top2}>放款 <CheckCircleFilled /> </span>
                        <span className={style1.top2}>还款 <CheckCircleFilled /> </span>
                        <span className={style1.top2,style1.top3}>完成 <ClockCircleFilled /> </span>

                        <Radio.Button value="large" > <PrinterOutlined /> 打印</Radio.Button>

                        <Link to='/home/duto'><Radio.Button value="large" className='buttonloan'> <LeftOutlined /> 返回</Radio.Button></Link>
                    </div>
                </div>
            
            </div>
            <Tabs defaultActiveKey="1" onChange={callback}>
            <TabPane tab="客户资料" key="1">
                <Row >
            {/* 表格左边 */}
            <Col className="gutter-row" span={18}>
                {/* 借款信息 */}
                <div>
                    <Row>
                        <Col className={style1.pre_title} span={24}>
                            <p >借款信息</p>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                        <Col className="gutter-row jiekuan jiekuan1" style={style4} span={12}>
                            {List(loanInfoData1, data1)}
                        </Col>
                        <Col className="gutter-row jiekuan" style={style4} span={12}>
                            {List(loanInfoData2, data2)}
                        </Col>
                    </Row>
                </div>

                {/* 个人信息 */}
                <div>
                    <Row>
                        <Col className={style1.pre_title} span={24}>
                            <p id='gerenxinxi'>个人信息</p>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                        <Col className="gutter-row" span={12} style={style4}>
                            {List(PersonInfo1, personalData1)}
                        </Col>
                        <Col className="gutter-row" span={12} style={style4}>
                            {List(PersonInfo2, personalData2)}
                        </Col>
                    </Row>
                </div>

                {/* 居住信息*/}
                <div>
                    <Row>
                        <Col className={style1.pre_title} span={24}>
                            <p id='juzhuxinxi'>居住信息</p>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                        <Col className="gutter-row" span={12} style={style4}>
                            {List(liveInfo1, liveData1)}
                        </Col>
                        <Col className="gutter-row" span={12} style={style4}>
                            {List(liveInfo2, liveData2)}
                        </Col>
                    </Row>
                </div>
                {/* 联系人信息 */}
                <div>
                    <Row>
                        <Col className={style1.pre_title} span={24}>
                            <p id='lianxiren'>联系人信息</p>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                        <Col className="gutter-row" span={12} style={style4}>
                            {List(ContactPerson1, ContactData1)}
                        </Col>
                        <Col className="gutter-row" span={12} style={style4}>
                            {List(ContactPerson2, ContactData2)}
                        </Col>
                    </Row>
                </div>
                {/* 职业信息 */}
                <div>
                    <Row>
                        <Col className={style1.pre_title} span={24}>
                            <p>职业信息</p>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                        <Col className="gutter-row" span={12} style={style4}>
                            {List(perfessionInfo1, perfessionData1)}
                        </Col>
                        <Col className="gutter-row" span={12} style={style4}>
                            {List(perfessionInfo2, perfessionData2)}
                        </Col>
                    </Row>
                </div>

                {/* 身份证信息 */}
                <div>
                    <Row>
                        <Col className={style1.pre_title} span={24}>
                            <p id='shenfenrenzhen'>身份证信息</p>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                        <Col className="gutter-row idcard" span={12} >身份证正/反面
                            <Row>
                                <Col className="gutter-row" span={12}>
                                    <span className='zhengmian'></span>
                                </Col>
                                <Col className="gutter-row" span={12}>
                                    <span className='fanmian'></span>
                                </Col>
                            </Row>
                        </Col>
                        <Col className="gutter-row handtext" span={12}>
                            手持身份证
                            <Row>
                                <Col className="gutter-row" span={24}>
                                    <span className='hand'></span>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                </div>
                {/* 人脸识别 */}
                <div>
                    <Row>
                        <Col className={style1.pre_title} span={24}>
                            <p>人脸识别</p>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                        <Col className="gutter-row" span={24} style={style4}>
                            {List(FaceInfo, FaceData)}
                        </Col>
                    </Row>
                </div>
                {/* 银行信息 */}
                <div>
                    <Row>
                        <Col className={style1.pre_title} span={24}>
                            <p id='yinhang'>银行信息</p>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} style={style3}>
                        <Col className="gutter-row" span={12} style={style4}>
                            {List(bankInfo1, bankData1)}
                        </Col>
                        <Col className="gutter-row" span={12} style={style4}>
                            {List(bankInfo2, bankData2)}
                        </Col>
                    </Row>
                </div>
                {/* 车辆证明材料 */}
                <div>
                    <Row>
                        <Col className={style1.pre_title} span={24}>
                            <p id='bucongzhengming'>车辆证明材料</p>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                        <Col className="gutter-row" span={4}>
                            <div className='carmatarils'>
                                <div>fdnfkodsjfdlvkcdss.jpg</div>
                                <div>fdnfkodsjfdlvkcdss.jpg</div>
                                <div>fdnfkodsjfdlvkcdss.jpg</div>
                            </div>
                        </Col>
                    </Row>
                </div>
                {/* 客户信息与材料核查-初审 */}
                <div>
                    <Row>
                        <Col className={style1.pre_title} span={24}>
                            <p id='shenhexinxi'>客户信息与材料核查-初审</p>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11 ' >
                        <Col className="gutter-row" span={4}>
                            初审结果
                        </Col>
                        <Col className="gutter-row" span={20}>
                            <Select defaultValue="审核通过" style={{ width: 120 }} allowClear  disabled>
                                <Option value="审核通过">审核通过</Option>
                            </Select>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result2' >
                        <Col className="gutter-row textPos" span={4}>
                            审核意见
                        </Col>
                        <Col className="gutter-row" span={20}>
                            <Input.TextArea disabled value='资料真实性核实无误，客户信息完整' />
                        </Col>
                    </Row>
                </div>
                {/* 借款申请额度审批-复审 */}
                <div>
                    <Row>
                        <Col className={style1.pre_title} span={24}>
                            <p>借款申请额度审批-复审</p>
                        </Col>
                    </Row>
                    {/* 复审结果 */}
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11 '>
                        <Col className="gutter-row" span={4}>
                            复审结果
                        </Col>
                        <Col className="gutter-row" span={20}>
                            <Select defaultValue="审核通过" style={{ width: 120 }} allowClear onSelect={getSelect} disabled>
                                <Option value="审核通过">审核通过</Option>
                                <Option value="审核拒绝">审核拒绝</Option>
                                <Option value="审核驳回">审核驳回</Option>
                            </Select>
                        </Col>
                    </Row>
                    {/* 额度批复 */}
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11' style={style3}>
                        <Col className="gutter-row" span={4}>
                            额度批复
                        </Col>
                        <Col className="gutter-row" span={20}>
                            <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11'>
                                <Col className="gutter-row" span={12}>审批金额</Col>
                                <Col className="gutter-row" span={10}>
                                    <Input  value={fushenvalue} disabled/>
                                </Col>
                                <Col span={2}>
                                    <span>元</span>
                                </Col>
                            </Row>

                            <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11'>
                                <Col className="gutter-row" span={12}>综合利率</Col>
                                <Col className="gutter-row" span={10}>
                                    <Input  placeholder='13.5' disabled/>
                                </Col>
                                <Col span={2}>
                                    <span>%</span>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result2'>
                        <Col className="gutter-row textPos" span={4}>
                            审核意见
                        </Col>
                        <Col className="gutter-row" span={20}>
                            <Input.TextArea  disabled/>
                        </Col>
                    </Row>
                </div>
                {/* 终审 */}
                <div>
                    <Row>
                        <Col className={style1.pre_title} span={24}>
                            <p>授信额度审批-终审</p>
                        </Col>
                    </Row>
                    {/* 终审结果 */}
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11 '>
                        <Col className="gutter-row" span={4}>
                            终审结果
                        </Col>
                        <Col className="gutter-row" span={20}>
                            <Select defaultValue="请选择" style={{ width: 120 }} allowClear onSelect={getSelect} >
                                <Option value="审核通过">审核通过</Option>
                                <Option value="审核拒绝">审核拒绝</Option>
                                <Option value="审核驳回">审核驳回</Option>
                            </Select>
                        </Col>
                    </Row>
                    {/* 额度批复 */}
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11' style={style3}>
                        <Col className="gutter-row" span={4}>
                            额度授信批复
                        </Col>
                        <Col className="gutter-row" span={20}>
                            <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11'>
                                <Col className="gutter-row" span={12}>审批金额</Col>
                                <Col className="gutter-row" span={10}>
                                    <Input onChange={getInputVal1} value={input1Value1} disabled/>
                                </Col>
                                <Col span={2}>
                                    <span>元</span>
                                </Col>
                            </Row>

                            <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result11'>
                                <Col className="gutter-row" span={12}>综合利率</Col>
                                <Col className="gutter-row" span={10}>
                                    <Input onChange={getInputVal2}  value={input1Value2} disabled/>
                                </Col>
                                <Col span={2}>
                                    <span>%</span>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} className='result2'>
                        <Col className="gutter-row textPos" span={4}>
                            审核意见
                        </Col>
                        <Col className="gutter-row" span={20}>
                            <Input.TextArea onChange={getText} />
                        </Col>
                    </Row>
                    <button className={style1.up} onClick={Submit}>提交审核</button>
                </div>
                
            </Col>

            {/* 右边小导航 */}
            <Col className="gutter-row" span={6}>
                <div className={style1.rightBox}>
                    <ul className={style1.rightNav} onClick={checked}>
                        {lis}
                    </ul>
                </div>
            </Col>
            <div className={style1.footer}>
                Copyright © 2018 深圳市涛涛金融科技有限公司, All Rights Reserved.
            </div>
                </Row>
            </TabPane>
            <TabPane tab="运营商信息" key="2">
                ww
            </TabPane>
            <TabPane tab="风控报告" key="3">
                ww
            </TabPane>
            <TabPane tab="聚信立" key="4">
                ww
            </TabPane>
            <TabPane tab="历史借款" key="5">
                ww
            </TabPane>
        </Tabs>

        
        
        </div>

        
    )
}


